<template>
    <div class="scroll-navbar pl20rem pr20rem" id="scroll" ref="scroll">
        <Navbar v-model="currentValue">
            <TabItem 
                v-for="(item,index) in channels" 
                :id="item[keyId]" 
                :key="item.keyId"
                @click.native="scrollMiddle(item[keyId])"
                :class="'tabItem' + item[keyId]"
                >
                {{ item[keyName] }}
                <slot name="name">
                    <p class="active"></p>
                </slot>    
            </TabItem>
        </Navbar>
    </div>
</template>
<script>
    import { Navbar, TabItem } from "mint-ui";
    export default {
        name: 'ScrollNavbar',
        props:
        {
            channels: {
                type: Array,
                required: true,
            },
            value:{
                type: [String,Number],
            },
            keyName:{
                type: String,
            },
            keyId:{
                type: String,
            }
        },
        components: {
            Navbar,
            TabItem
        },
        data()
        {
            return {
                currentValue: this.value
            }
        },
        watch:{
            currentValue(newVal,oldVal)
            {
                this.$emit('input', newVal);
            }
        },
        methods: {
            scrollMiddle(id) {
                if(!id)
                    id = this.$route.params.id
                else
                    this.$route.params.id = id;

                if(!id && !this.$route.params.id)
                    id = 0;

                if(this.$route.params.id == '-5')
                    id = 9;

                if(this.$route.params.id == -6)
                    id = 0;
           
                this.$nextTick(() => {
                    const scroll = this.$refs.scroll;
                    const scroll_width = scroll.offsetWidth; //滚动条宽度（页面宽度）
                    const scroll_width_haft = scroll_width / 2;
                    const current_dom = document.getElementsByClassName('tabItem' + id)[0]; //当前点击的item的DOM对象
                    const client_width = current_dom.offsetWidth;//点击的元素距离窗口左侧距离
                    const client_x = current_dom.offsetLeft;//点击的元素距离窗口左侧距离
                    /**
                     * 如果点击的元素距离左侧的距离超过整个窗口宽度的一半，则需要进行居中处理。如果小于，则归零
                     * 居中处理：将scroll-navbar的滚动条往右滚动，即加大scroll-navbar距离窗口左侧的距离。
                     * 滚动距离：点击的元素距离左侧的距离 - 窗口宽度的一半 = 偏移量；由于点击的元素本身还占有一定的宽度，所以在偏移量的基础要需要加上点击的元素本身宽度的一半
                     */
                    let scroll_distance = 0;
                    if (client_x > scroll_width_haft) {
                        scroll_distance = client_x - scroll_width_haft + client_width / 2;
                    }
                    scroll.scrollLeft = scroll_distance
                });
            }
        },
        //只要 DOM 更新了就会调用
        updated()
        {
            let id = this.$route.params.id;
            this.$nextTick(() => {
                this.scrollMiddle(id);
            })
        }
    }
</script>

<style lang="less">
    .scroll-navbar {
        overflow-x: scroll; 
        overflow-y: hidden;
        width: 100%;
        box-sizing: border-box;
        background: #FFF;
        height: 100/28rem;
        line-height: 100/28rem;
        .mint-tab-item{
            padding-top: 0;            
            // padding-bottom: 20/28rem;
            // min-width: 56/28rem;
        }
        .mint-navbar {
            width: 100%;
            display: inline-flex;
            .mint-tab-item{
                margin-left: 28/28rem;
                margin-right: 28/28rem;
                white-space: nowrap;                 
            }
            .is-selected {
                font-weight: bold;
                color: #ff0036 !important;
                border-bottom: none;
                .mint-tab-item-label{
                    text-align: center; 
                    text-align: -webkit-center;
                    .active{
                        border-bottom-color: #ff0036;
                    }
                }                
            }
            .active{
                display: block;
                width:80/28rem;
                border-bottom:2px solid #fff;
                margin-top: 32/28rem;                
            }
        }
        .mint-tab-item-label{
            font-size: 28/28rem;
        }
    }
</style>